<template>
  <el-drawer :model-value="visible" title="人员列表" size="30%" append-to-body lock-scroll @close="handleClose">
    <div v-loading="loading">
      <div v-if="list.length !== 0" class="primary-section pv-12 mb10" :key="index" v-for="(item, index) in list">
        <div class="font-w">
          <span>{{ item.name }}</span>
          <span style="float:right; margin-right: 5%; font-weight: normal" @click="handleRemove(item, index)">移除</span>
        </div>
        <div class="fc-regular mt5">{{ item.contacts }}</div>
      </div>
      <div v-else>
        <el-empty></el-empty>
      </div>
    </div>
  </el-drawer>
</template>
<script setup>

import {getPersons, getRenterList, removeRenter} from "@/api/device/faceLock.js";

const emit = defineEmits()
const { proxy } = getCurrentInstance()
const total = ref(0)
const list = ref([])
const loading = ref(false)
const loadTime = ref(0)
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
})

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  row: {
    type: Object,
    default: () => {}
  },
})

const { queryParams } = toRefs(data)

watch(() => props.visible, value => {
  if (value) {
    getList()
  }
})

function handleGetRenterList(lockId) {
  getRenterList(lockId).then(res => {
    if (!res.data) {
      if (loadTime.value >= 5) {
        loading.value = false
        list.value = []
      } else {
        setTimeout(() => {
          loading.value = true
          handleGetRenterList(lockId)
          loadTime.value += 1
        }, 2000)
      }
    } else {
      loading.value = false
      list.value = res.data
    }
  })
}

/* 获取列表数据 */
function getList() {
  if (Object.keys(props.row).length === 0) {
    return
  }
  loadTime.value = 0
  loading.value = true
  list.value = []
  getPersons(props.row.faceLockId).then(() => {
    handleGetRenterList(props.row.faceLockId)
  })
}

function handleClose() {
  loading.value = false
  emit('cancel')
}

function handleRemove(row, index) {
  console.log(row)
  const params = {
    faceLockId: props.row.faceLockId,
    renterId: row.renterId
  }
  removeRenter(params).then(res => {
    if (res.code === 200) {
      list.value.splice(index, 1)
      proxy.$message.success('操作成功')
    }
  })
}

getList()
</script>
